<template>
  <div class="train-info-container">
    <el-row :gutter="20">
      <el-col :span="12" >
        <el-card  style=" height: 233px;background-color: #F0FFFF" >
          <div slot="header">
            <span>列车信息</span>
          </div>
          <el-row :gutter="20" >
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">机车类型:</span>
                <span class="info-value">{{ trainInfo.locomotiveType }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">机车编号:</span>
                <span class="info-value">{{ trainInfo.locomotiveNumber }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">下载操作员:</span>
                <span class="info-value">{{ trainInfo.operator }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" >
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">下载设备号:</span>
                <span class="info-value">{{ trainInfo.deviceNumber }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">本次下载时间:</span>
                <span class="info-value">{{ trainInfo.currentDownloadTime }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="info-label">上次下载时间:</span>
                <span class="info-value">{{ trainInfo.lastDownloadTime }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" >
        <el-card class="query-card" style=" height: 233px;background-color: #F0FFFF">
          <div slot="header">
            <span>筛选结果查询</span>
          </div>
          <el-form :inline="true" :model="queryForm" class="query-form">
            <el-row :gutter="20">
              <el-col :span="16">
            <el-form-item label="项目选择">
              <el-select v-model="queryForm.project" placeholder="请选择项目">
                <el-option label="项目1" value="project1"></el-option>
                <el-option label="项目2" value="project2"></el-option>
                <el-option label="项目3" value="project3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="比较方式">
              <el-select v-model="queryForm.comparison" placeholder="请选择比较方式">
                <el-option label="等于" value="equal"></el-option>
                <el-option label="大于" value="greater"></el-option>
                <el-option label="小于" value="less"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="比较数值">
              <el-input v-model="queryForm.value" placeholder="输入比较值"></el-input>
            </el-form-item>
              </el-col>
              <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      trainInfo: {
        locomotiveType: 'HXD2',
        locomotiveNumber: '1051A',
        operator: '前台',
        deviceNumber: '导入',
        currentDownloadTime: '2024-03-07 14:29:15',
        lastDownloadTime: '——'
      },
      queryForm: {
        project: '',
        comparison: '',
        value: ''
      }
    }
  },
  methods: {
    handleQuery() {
      // 处理查询逻辑
      this.$message({
        message: '查询功能尚未实现',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.train-info-container {

}

.info-item {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;  /* 改为垂直排列 */
}

.info-label {
  font-weight: bold;
  margin-bottom: 5px;  /* 标签和值之间增加间距 */
}

.query-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.query-form .el-form-item {
  margin-bottom: 10px;
}
</style>
